body{

position: absolute;
width: 100%;
overflow-x: hidden;

background-color: #242d33;
}


/* Sidebar styling */
.sidebar {
z-index: 3;
width: 250px;
height: 100vh;
position: fixed;
text-align: left;
background-color: #343a40; /* Dark background color */
color: white;
top: 0; /* Align to the left */
left: 0; /* Align to the left */
overflow-x: hidden; /* Prevent horizontal scroll */
transition: all 0.3s;
padding: 1rem;
}

.sidebar .nav-item .nav-link {
color: #adb5bd; /* Lighter text color for items */
border-radius: 0;
padding: 15px 20px; /* Adjust padding as necessary */
}

.sidebar .nav-item .nav-link.active {
color: white;
background-color: #1d2124; /* Active item background color */
}

/* Content styling */
.content {
padding: 2rem 1rem;
overflow: hidden; /* Prevent content from making the page scrollable horizontally */
}

.btn-sidebar {
padding-left: 9px;
}

/* Adjustments for active tab to highlight correctly */
.nav-link.active {
font-weight: bold;
color: #fff !important;
background-color: #007bff !important;
}


/* Main content area styling */
.container-fluid {
padding-left: 250px; /* Adjust based on the width of the sidebar */
background-color: #f8f9fa; /* Light grey background */
min-height: 100vh; /* Full height */
}



/* toggle */


#toggleSidebar {
position: absolute;
left: 8px;
bottom: 15px;
}


#toggleSidebar .sidebar.close {
    display: none; /* Hide sidebar completely */
    width: 0px;
    padding: 0px; /* Padding inside content boxes */
}


#toggleSidebar .sidebar.nav-text {
display: block;  
}

#toggleSidebar .sidebar.icons-only .nav-text {
display: none;  
}

#toggleSidebar .sidebar.icons-only{
align-items: center;
}

/* Position the settings link at the bottom */
.sidebar .mt-auto {
position: absolute;
bottom: 10px;
}

.sidebar .mt-auto .nav-settings {
bottom: 10px;
width: 175%;
}

.sidebar.icons-only .mt-auto .nav-settings.active  {
bottom: 10px;
width: 100%;
}



/* Adjust icon layout in icons-only mode */
.sidebar.icons-only .nav-link {
justify-content: center; /* Center icons horizontally */
display: block;
}

.sidebar.icons-only .nav-item {
justify-content: center; /* Center items in the sidebar */
display: block;

}

/* Adjust the sidebar width when in icons-only mode */
.sidebar.icons-only {
width: 100px; /* Adjust the width as needed */
align-items: center; /* Center items vertically */

}


.dashboard-content.icons-only > div {
background-color: #f8f9fa; /* White background for content boxes */
border-radius: 4px; /* Rounded corners for the boxes */
border: 1px solid #ddd; /* Light grey border for the boxes */
padding-bottom: 20px; /* Space between content boxes */
padding-left: 250px; /* Space between content boxes */
}




/* Adjust the sidebar width when in collapsed mode */
.sidebar.icons-only .nav-text {
display: none;
}



/* mobile */




@media (max-width: 768px) {
.sidebar {
    display: none; /* Hide sidebar completely */
    width: 0px;
    padding: 0px; /* Padding inside content boxes */
}

/* Bottom navigation bar */
.bottom-nav {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    position: fixed; /* Fixed at the bottom */
    bottom: 0; /* Align to bottom */
    left: 0; /* Align to left */
    padding-left: 20px; /* Align to left */
    padding-right: 20px; /* Align to left */
    width: 100%; /* Full width */
    height: 60px; /* Adjust based on your preference */
    background-color: #343a40; /* Match sidebar color */
    z-index: 1050; /* Ensure it's above other content */
}

.bottom-nav .nav-link {
    flex-grow: 1; /* Distribute space evenly */
    text-align: center; /* Center the icons */
    color: white; /* Icon color */
    padding-top: 7px;
    padding-bottom: 7px;
}


/* Boxed content styling */
#dashboard-wrapping > div {
margin-left: 0px; /* Space between content boxes */

}

#dashboard-wrapper > div {
background-color: #f8f9fa; /* White background for content boxes */
border-radius: 4px; /* Rounded corners for the boxes */
border: 1px solid #ddd; /* Light grey border for the boxes */
padding-bottom: 20px; /* Space between content boxes */
padding: 5px; /* Padding inside content boxes */
}





}




/* Adjustments for the dashboard wrapper to be full width in mobile */
@media (max-width: 768px) {
.dashboard-wrapper {
    margin-left: 0; /* Remove any margin to the left */
    width: 100%; /* Make the dashboard take full width */
}
.sidebar {
    display: none; /* Ensure sidebar is not displayed in mobile view */
}
.bar { /* Adjust bar sizes for smaller screens */
height: 50px; /* Smaller height for mobile */

}


.containerFun {
padding-left: 30px;
    padding-right: 30px;  
}


}





.alien-dashboard {
background-color: #343a40; /* Deep space blue */
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px #007bff; /* Neon glow */
}

.metrics-container {
display: flex;
justify-content: space-around;
background-color: #343a40; /* Deep space blue */
padding: 20px;
border-radius: 10px;
margin-bottom: 20px; /* Space between this section and others */
}

.metric-input-group {
flex-basis: 30%; /* Allocate equal width with some space between */
background-color: #343a40; /* Darker shade for contrast */
padding: 15px;
margin: 35px;

border-radius: 10px;
border: 2px solid #007bff; /* Neon outline */
text-align: center; /* Centering label and input */
font-size: 24px; /* Larger font for the input */

}

.metric-input-group label {
color: #007bff; /* Neon text color */
font-size: 24px; /* Larger font size for better readability */
margin-bottom: 10px;
display: block; /* Ensure label takes its own line */
}



.alien-dashboard .section-title, .economics-container .economics-title {
color: #007bff; /* Neon blue */
text-align: center;
}

.set-funnel-btn {
background-color: #007bff; /* Neon blue */
color: #ffffff; /* White */
margin: 20px auto; /* Center button */
padding: 10px 20px;
border: none;
border-radius: 5px;
display: block; /* Ensure button is centered */
font-size: 18px;
}

.metrics-container .metric-input-group {
background-color: #343a40; /* Deep space blue */
color: #007bff; /* Text color */
margin-bottom: 15px; /* Spacing between metrics */
}

.metrics-container .metric-results p {
color: #007bff; /* Consistent text color for results */
margin: 5px 0; /* Tighter line spacing for results */
}

.metric-input {
font-size: 24px; /* Larger font for the input */
color: #ffffff; /* White text for readability */
border: 2px solid #007bff; /* Neon border */
border-radius: 5px;
padding: 10px; /* Larger padding for a bigger touch area */
background-color: #ffffff; /* Slightly lighter background on focus */
text-align: center;
}

/* Retain the existing keyframes and focus styles for pulsing animation */




.metrics-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Creates a 2-column grid */
gap: 20px; /* Spacing between grid items */
padding: 20px; /* Padding around the entire grid */
margin: auto; /* Center the container */
}

.metrics-container2 {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Creates a 2-column grid */
gap: 20px; /* Spacing between grid items */
padding: 20px; /* Padding around the entire grid */
max-width: 1200px; /* Adjust based on your design */
margin: auto; /* Center the container */
}

.metric-input-group2 {
background-color: #343a40; /* Or any preferred background color */
padding: 15px;
border-radius: 10px;
border: 2px solid #007bff; /* Neon outline */
text-align: center; /* Centering label and input */
display: flex;
flex-direction: column; /* Stack children vertically */
align-items: center; /* Align items in the center for a neat look */
width: 100%; /* Use the full width of the grid column */
}

.metric-input-group2 label {
    margin: 10px 0; /* Add more space around labels and paragraphs for clarity */
color: #007bff; /* Neon text color */
font-size: 18px; /* Adjust based on preference */
width: 100%; /* Ensures labels and results span the full width */
}

.metric-results2 {
font-size: 20px; /* Larger font for the input */
text-align: left; /* Centering label and input */
margin-left: 20px; /* Padding around the entire grid */

}

.metric-input-group2 .metric-results p {
margin: 10px 0; /* Add more space around labels and paragraphs for clarity */
color: #007bff; /* Neon text color */
font-size: 18px; /* Adjust based on preference */
width: 100%; /* Ensures labels and results span the full width */
text-align: left; /* Centering label and input */

}

.metric-input-group3 {
background-color: #343a40; /* Or any preferred background color */
padding: 15px;
border-radius: 10px;
border: 2px solid #007bff; /* Neon outline */
text-align: center; /* Centering label and input */
display: flex;
flex-direction: column; /* Stack children vertically */
align-items: center; /* Align items in the center for a neat look */
width: 100%; /* Use the full width of the grid column */
margin: 5px; /* Use the full width of the grid column */
flex-basis: 30%; /* Allocate equal width with some space between */

font-size: 24px; /* Larger font for the input */

}

.metric-input {
width: 100%; /* Adjust the width of inputs to fill the container */
margin: 10px 0; /* Add space above and below for clarity */
/* Retain other styles (e.g., font-size, border) */

background-color: transparent;
color: white;
border: none;
border-bottom: 2px solid #007bff; /* Neon underline */
padding-right: 10px;
width: auto; /* Adjust based on layout */
display: inline-block;
}

/* Responsive adjustments for smaller screens */


/* Responsive adjustments for smaller screens */
@media (min-width: 1067px) {


.containerFunnel {

padding-left: 30px;
padding-right: 30px;

}



.flip-container {
  perspective: 1500px;
perspective-origin: 50% 50%; /* Center the perspective */
position: relative;
height: 450px; /* Adjust as needed */
width: 100%; /* Adjust width as needed */
margin-top: 20px; /* Adjust the value as needed */

}


.number-value-leads {
    font-size: 2em;
    font-weight: bold;
    color: #007bff;
    align-items: center;
    padding-left: 5px;

    }


}

/* Responsive adjustments for smaller screens */
@media (min-width: 1367px) {


.containerFunnel {

padding-left: 60px;
padding-right: 60px;

}
}
/* Responsive adjustments for smaller screens */
@media (min-width: 1567px) {


.containerFunnel {

padding-left: 100px;
padding-right: 100px;

}
.number-value-leads {
    font-size: 2em;
    font-weight: bold;
    color: #007bff;
    align-items: center;
    padding-left: 10px;

    }
}

/* Responsive adjustments for smaller screens */
@media (min-width: 1700px) {


.containerFunnel {

padding-left: 160px;
padding-right: 160px;

}
}

/* Responsive adjustments for smaller screens */
@media (max-width: 2500px) {

.funnel-stage {
padding-bottom: 100px;
margin-bottom: 30px;
}}


/* Responsive adjustments for smaller screens */
@media (max-width: 1500px) {

.funnel-stage {
padding-bottom: 100px;
margin-bottom: 30px;
}}





/* Responsive adjustments for smaller screens */
@media (max-width: 1316px) {

.metrics-container {
    grid-template-columns: 1fr; /* One column grid on smaller screens */
}
.containerFun {

    padding-left: 60px;
    padding-right: 60px;

}

.funnel-stage {

padding-bottom: 150px;
margin-bottom: 30px;
}

.funnel-stage {

padding-bottom: 150px;
margin-bottom: 30px;
}


}

@media (max-width: 1067px) {
.metrics-container2 {
    grid-template-columns: 1fr; /* One column grid on smaller screens */
}

.flip-container {
  perspective: 2500px;
perspective-origin: 50% 50%; /* Center the perspective */
position: relative;
height: 450px; /* Adjust as needed */
width: 100%; /* Adjust width as needed */
margin-top: 20px; /* Adjust the value as needed */
}


.funnel-stage {
padding-bottom: 200px;
margin-bottom: 20px;
}
}


/* Responsive adjustments for smaller screens */
@media (min-width: 1316px) {


.containerFun {

padding-left: 140px;
padding-right: 140px;    
}



}



/* adjust tab content color and size*/
.tab-content {
background-image: none; /* Removes the gradient */
background-color: #242d33;
color: #102d4b; /* Dark grey text for readability */
padding: 1.3rem;
margin-bottom: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);

}





/* Styling for the form-control inputs */
.form-control {
background-color: #ffffff; /* Dark background for depth */
color: #00ff88; /* Neon text color for consistency */
border: 2px solid #007bff; /* Neon outline to match your theme */
border-radius: 5px; /* Rounded corners for a modern look */
padding: 10px; /* Adequate padding for text visibility */
font-size: 16px; /* Slightly larger font for readability */
margin-bottom: 15px; /* Spacing below each input for clarity */
}

/* Styling for labels for a consistent theme */
.form-check-label, .upsell-value-section label {
color: #00ff88; /* Neon text color to match inputs */
font-weight: bold; /* Make labels stand out */
margin-bottom: 5px; /* Space between label and input box */
display: block; /* Ensure labels appear above inputs */
}

/* Enhancing checkboxes to fit the neon theme */
.form-check-input {
accent-color: #007bff; /* Use this for modern browsers; it colors the checkbox */
}

/* Enhancing button styling to fit the neon aesthetic */
.btn-primary {
background-color: #007bff; /* Neon button color */
border: none; /* Remove default border */
padding: 10px 20px; /* Comfortable padding */
font-size: 16px; /* Readable text size */
border-radius: 5px; /* Rounded corners */
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.btn-primary:hover {
background-color: #0056b3; /* Darker shade when hovering */
}





.tofu-input {
    width: 75%; /* or any other preferred width */
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.icon-lrg {
    font-size: 2rem;

}






/* Responsive adjustments for the form elements */
@media (max-width: 768px) {
.form-control {
    width: 100%; /* Full width to accommodate smaller screens */
}
.upsell-value-section, .form-check {
    text-align: left; /* Align text to the left for readability on small screens */
}

.bottom-icons {
    display: none; /* Hide the container in mobile view */
    
}



/* adjust tab content color and size*/
.tab-content {
background-image: none; /* Removes the gradient */
background-color: #242d33;
color: #102d4b; /* Dark grey text for readability */
padding: 1.3rem;
margin-bottom: 0rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);

}







.tofu-input {
    width: 100%; /* or any other preferred width */
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}
}









.alien-dashboard {
background-color: #343a40; /* Dark background */
color: #007bff; /* Neon text color */
padding: 20px;
border-radius: 10px;
margin: auto; /* Center align if not full width */

}


.form-group {
margin-bottom: 20px;
}

.form-check-input {
margin-top: 0.3em;
accent-color: #007bff; /* Neon checkbox color */
}

.form-check-label {
margin-left: 10px;
font-size: 16px;
}

.form-note {
display: block;
margin-top: 10px;
color: #00ff88;
}

.metric-input-group {
margin-top: 10px;
}

.metric-input-group label {
display: block;
margin-bottom: 10px;
}

.input-wrapper {
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
}

.metric-input {
background-color: transparent;
color: white;
border: none;
border-bottom: 2px solid #007bff; /* Neon underline */
margin-right: 10px;
width: auto; /* Adjust based on layout */
display: inline-block;
}

.metric-input:focus {
border-color: #007bff;
outline: none;
}




#metricSelect, #funnelSlider {
cursor: pointer; /* Improves UX by indicating interactivity */
}

#metricSelect {
width: 100%; /* Ensures the select box fills its container */
margin: auto; /* Center align if not full width */
}

#funnelSlider  {
width: 100%; /* Ensures the slider fills its container */
margin: auto; /* Center align if not full width */
}

/* Specific styles for targeted sliders */
#DROISlider,
#DVPCSlider,
#BudgetxSlider,
#DRSlider {
-webkit-appearance: none; /* Remove default appearance */
width: 50%; /* Full width */
height: 16px; /* Adjust the height of the track */
background: #3f45fa; /* Track color */
outline: none;
border-radius: 8px; /* Rounded corners for the track */
}

/* Custom thumb styles for targeted sliders */
#DROISlider::-webkit-slider-thumb,
#DVPCSlider::-webkit-slider-thumb,
#BudgetxSlider::-webkit-slider-thumb,
#DRSlider::-webkit-slider-thumb {
-webkit-appearance: none; /* Remove default thumb appearance */
width: 24px; /* Increase the thumb size */
height: 24px;
background: #007bff; /* Thumb color */
cursor: pointer;
border-radius: 50%; /* Make the thumb circular */
border: 2px solid #fff; /* Optional: Add a border for contrast */
}

#DROISlider::-moz-range-thumb,
#DVPCSlider::-moz-range-thumb,
#BudgetxSlider::-moz-range-thumb,
#DRSlider::-moz-range-thumb {
width: 24px;
height: 24px;
background: #007bff;
cursor: pointer;
border-radius: 50%;
border: 2px solid #fff;
}


#sliderValue {
display: inline-block; /* Keeps value next to slider */
margin-left: 15px; /* Spacing between slider and value */
margin-top: 10px; /* Spacing between slider and value */
font-weight: bold; /* Makes the value stand out */
}


#center {
display: flex;
justify-content: center;
align-items: center;

}


#d3chart_material {
        width: auto;
        height: auto;
        margin: 0 auto;
        padding: 10px;
        position: relative;
        }


#d3piechart_material {
        width: auto;
        height: auto;
        margin: 0 auto;
        padding: 10px;
        position: relative;
        }


        


.btn-success-ai {
    color: white !important;
            font-size: 1.2em; /* Adjust the value as needed */

}


.btn-settings {
    color: white !important;
            font-size: 1.2em; /* Adjust the value as needed */

}





.logo-large, .logo-small {
transition: all 0.3s ease; /* Smooth transition for the logo change */
}

.logo-large {
max-width: 200%; /* Large logo size */
}

.logo-small {
max-width: 60%; /* Small logo size */
}



.lead-mini-funnel, .touch-mini-funnel {
position: relative;
width: 200px;  /* Increased width */
height: 300px; /* Increased height */
margin: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}

.lead-mini-funnel .mini-stage, .touch-mini-funnel .mini-stage {
height: 50px; /* Increased height */
background-color: #ddd;
margin-bottom: 5px; /* Larger margin */
border-radius: 5px;
}

.highlight {
border: 3px solid red;
}

.animate-below-threshold {
animation: pulse 1s infinite;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}









/* Main Content: Default Hidden */
.main-content {
display: block; /* Hidden until user is authenticated */
text-align: center;
}

h1 {
color: #333;
}